<template>
    <div class="search">
        <meta name="referrer" content="no-referrer"/>
        <div id="div1">
<!--            <Header/>-->
            <a style="margin-top: 20px;position: absolute;top: 20px;left: 20px" @click="back_page">返回上一页</a>
            <br>
            <p style="color: red">
            <h2><b>共{{movie_total}}部</b></h2>
            <div v-for="movie in search_movie_list"
                 style="display: inline-block;margin-left: 100px;float: left;width: 100px;height: 350px;margin-bottom: 20px">
                <span>
                    <router-link :to="'/detail/'+movie.id">
                        <img :src="movie.movie_img" height="250px"
                             :alt="movie.name">
                        <h6><b>{{movie.name}}</b></h6>
                    </router-link>
                </span>
            </div>
        </div>
        <div class="course_pagination block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="filter.page"
                    :page-sizes="[10]"
                    :page-size="filter.size"
                    layout="prev, pager, next"
                    :total="movie_total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import Header from "../components/Header";

    export default {
        name: "Search",
        components: {
            Header
        },
        data() {
            return {
                search_key: '',
                search_movie_list: [],
                movie_total: 0,
                filter: {
                    search: '',
                    ordering: "-orders",
                    size: 14,
                    page: 1,
                }
            }
        },
        created() {
            this.get_search_key();
            this.get_search_movies()
        },
        watch: {
            //当你监听的数据发生变化，就会执行函数
            "filter.search": function () {
                this.filter.page = 1;
                this.get_search_movies();
            },
            "filter.ordering": function () {
                this.get_search_movies();
            },
            "filter.size": function () {
                this.get_search_movies();
            },
            "filter.page": function () {
                this.get_search_movies();
            }
        },

        methods: {
            back_page(){
                this.$router.back()
            },
            handleSizeChange(val) {
                // 每页数据量发生变化时执行的方法
                this.filter.page = 1;
                this.filter.size = val;
            },
            handleCurrentChange(val) {
                // 页码发生变化时执行的方法
                this.filter.page = val;
            },
            get_search_key() {
                this.search_key = this.$route.query.search;
            },
            get_search_movies() {
                // this.filter.search = this.$route.query.search
                let filters = {
                    ordering: this.filter.ordering, // 排序
                };

                // 设置单页数据量
                if (this.filter.size > 0) {
                    filters.size = this.filter.size;
                } else {
                    filters.size = 20;
                }

                if (this.search_key) {
                    filters.search = this.search_key;
                }

                // 设置当前页码
                if (this.filter.page > 1) {
                    filters.page = this.filter.page;
                } else {
                    filters.page = 1;
                }
                console.log('this.search_key:', this.search_key);
                this.$axios.get(this.$settings.base_url+'/yingshi/search/',{
                    params: filters
                }).then(response => {
                    this.search_movie_list = response.data['results']
                    this.movie_total = response.data.count;
                }).catch(error => {
                })
            }
        }
    }
</script>

<style scoped>
    .course_pagination {
        position: absolute;
        top: 835px;
        left: 600px;
    }
</style>